import React from 'react';
import { Moment } from 'moment';
import styles from './index.less';
import solarLunar from 'solarLunar';

const DayItem: React.FC<{
  day: Moment;
  type?: 'active' | 'gray' | 'normal';
  onClick: (day: Moment) => void;
}> = ({ day, type = 'normal', onClick }) => {
  const year = day.year();
  const mon = day.month();
  const date = day.date();
  const lunar = solarLunar.solar2lunar(year, mon, date);
  const getTypeClass = () => {
    switch (type) {
      case 'active':
        return styles.active;
      case 'gray':
        return styles.gray;
      default:
        return '';
    }
  };
  return (
    <div className={styles.dayItemWrapper}>
      <div className={styles.dayItem + ' ' + getTypeClass()} onClick={() => onClick?.(day)}>
        <span className={styles.date}>{date}</span>
        <span className={styles.dayCn}>{lunar.dayCn}</span>
      </div>
    </div>
  );
};

export default React.memo(DayItem);
